const fs = require('fs')
const path = require('path')
const gulp = require('gulp')

const fileInclude = require('gulp-file-include')
const less = require('gulp-less')
const prefix = require('less-plugin-autoprefix')
const autoprefix = new prefix({
    browsers: ['> 1%']
})
const clearCss = require('less-plugin-clean-css')
const cleanCss = new clearCss({
    advanced: true
})
const del = require('del')
const changed = require('gulp-changed')
const sourcemaps = require('gulp-sourcemaps')
const connect = require('gulp-connect')
const webpack = require('webpack')
const gulpWebpack = require('gulp-webpack')

gulp.task('watch', () => {
    gulp.watch([
        'src/*.html',
        'src/**/*.html',
        'src/**/**/*.html',
    ], ['whtml']);

    gulp.watch([
        'src/*.less',
        'src/**/*.less',
        'src/**/**/*.less',
    ], ['wcss']);

    gulp.watch([
        'src/**/*.ts',
        'src/**/**/*.ts',
    ], (event) => {
        wts(event.path)
    })

    gulp.watch('src/components/*.html', ['html']);
})

function wts(filePath) {
    const DEST = 'dist'
    const relativePath = path.relative(__dirname, filePath)

    gulp.src('src/pages/**/*.ts')

        .pipe(gulpWebpack({
            entry: {
                [relativePath.replace(`src\\pages\\`, '').replace('.ts', '')]: `./${relativePath}`,
            },
            output: {
                path: path.resolve(__dirname, 'dist'),
                filename: '[name].js'
            },
            devtool: 'source-map',
            context: __dirname,
            plugins: [
                new webpack.optimize.UglifyJsPlugin({
                    sourceMap: true,
                }),
            ],
            module: {
                rules: [{
                    test: /.ts$/,
                    use: [{
                        loader: 'babel-loader',
                    }, {
                        loader: 'ts-loader',
                    }]
                }]
            }
        }, webpack))
        .pipe(gulp.dest(DEST))
        .pipe(connect.reload())
}

gulp.task('wts', () => {
    const DEST = 'dist'
    gulp.src('src/pages/**/*.ts')
        .pipe(changed(DEST))
        .pipe(gulpWebpack({}))
        .pipe(connect.reload())
})

gulp.task('wcss', () => {
    const DEST = 'dist'
    gulp.src('src/pages/**/*.less')
        .pipe(changed(DEST))
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix, cleanCss]
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(DEST))
        .pipe(connect.reload())
})

gulp.task('whtml', () => {
    const DEST = 'dist'
    gulp.src('src/pages/**/*.html')
        .pipe(changed(DEST))
        .pipe(fileInclude({
            prefix: '@',
            basepath: './src/components',
            webRoot: './dist'
        }))
        .pipe(gulp.dest(DEST))
        .pipe(connect.reload())
})

gulp.task('clear', async() => {
    await del(['dist/**/*'])

    gulp.src('src/pages/**/*.html')
        .pipe(fileInclude({
            prefix: '@',
            basepath: './src/components',
        }))
        .pipe(gulp.dest('dist/'))

    gulp.src('src/pages/**/*.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix, cleanCss]
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/'))
})

gulp.task('html', () => {
    gulp.src('src/pages/**/*.html')
        .pipe(fileInclude({
            prefix: '@',
            basepath: './src/components',
        }))
        .pipe(gulp.dest('dist/'))
})

gulp.task('css', () => {
    gulp.src('src/pages/**/*.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix, cleanCss]
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/'))
})

gulp.task('server', () => {
    connect.server({
        root: 'dist',
        port: 8001,
        livereload: true
    })
})

gulp.task('default', ['server', 'watch']);